@use './variables.scss' as *;
@use './layout.scss' as *;
@use './element-plus' as *;
@use 'layout.dark' as *;

@function valueByDevWith($args) {
  @return calc($args/1920) * 100vw;
}

.el-main {
  color: var(--el-color-white);
}

/* 全局flex使用 */
.spacer {
  flex-grow: 1;
}

// .el-dialog__header {
//     background: $dialog-header-background-color;
// }

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: $main-background-color !important;
}

:deep(.el-table td.el-table__cell) {
  color: #ffffff;
}

//间隙
:deep(.el-table__body) {
  border-collapse: separate !important;
  border-spacing: 0px 4px !important;
}

/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background: #2d99ff26 !important;
}

:deep(.el-table__border-left-patch) {
  width: 0 !important;
}

:deep(.el-table thead th) {
  border: 1px solid !important;
  border-image: linear-gradient(
      0deg,
      rgba(0, 174, 255, 0.51),
      rgba(0, 140, 255, 0),
      rgba(0, 170, 255, 0.7)
    )
    1 1 !important;
}

.linear-gradient-bg {
  border: 1px solid !important;
  border-image: linear-gradient(
      0deg,
      rgba(0, 174, 255, 0.51),
      rgba(0, 140, 255, 0),
      rgba(0, 170, 255, 0.7)
    )
    1 1 !important;
}

:deep(.el-table thead th.el-table__cell) {
  color: white;
  background: linear-gradient(360deg, #002b53ff 0%, #000922ff 100%) !important;
}

:deep(.el-table thead.is-group th.el-table__cell) {
  color: white;
  background: linear-gradient(360deg, #002b53ff 0%, #000922ff 100%) !important;
}

:deep(.el-table__inner-wrapper::after),
:deep(.el-table__inner-wrapper::before) {
  display: none !important;
}

//边框
:deep(.el-table th),
:deep(.el-table td.el-table__cell) {
  border: none !important;
}

:deep(.el-table::before) {
  width: 0px !important;
}

:deep(.el-table--border::after) {
  width: 0px !important;
}

:deep(.el-table td) {
  background: #071f45 !important;
}
:deep(.line-even-color td) {
  background: linear-gradient(360deg, #011a3b 0%, #010d2b 100%) !important;
  border: 1px solid;
  border-image: linear-gradient(0deg, rgba(1, 33, 72, 1), rgba(1, 47, 87, 1)) 1
    1;
}

:deep(.line-odd-color td) {
  background: rgba(7, 31, 69, 1) !important;
}

:deep(.input-bg .el-input__wrapper) {
  box-shadow: #00aeff82 0px 0px 0px 1px inset;
  background: linear-gradient(
    360deg,
    rgba(0, 105, 175, 0.64) 0%,
    rgba(0, 67, 119, 0.01) 100%
  );
  border-radius: 15px;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper),
:deep(.el-pagination__sizes .el-input__wrapper) {
  box-shadow: none;
  background: url('@/assets/images/pagination-jump.png');
  background-size: 100% 100%;
}

:deep(.el-pagination__jump.is-last .el-input__wrapper) {
  box-shadow: none;
  background: url('@/assets/images/pagination-jump.png');
  background-size: 100% 100%;
}

:deep(.el-pagination__jump.is-last),
:deep(.el-pagination__jump.is-last .el-input__inner),
:deep(.el-pagination__sizes .el-input__inner),
:deep(.el-pagination__total.is-first) {
  color: #379fe2;
}

:deep(.el-pager li) {
  background: url('@/assets/images/pagination-page.png');
  background-size: 100% 100%;
  margin: 4px;
}

:deep(.btn-prev i) {
  display: none;
}

:deep(.btn-prev) {
  background: url('@/assets/images/prev-page.png') !important;
  background-size: 100% 100% !important;
}

:deep(.btn-next) {
  background: url('@/assets/images/next-page.png') !important;
  background-size: 100% 100% !important;
}

:deep(.el-pagination button:disabled) {
  color: transparent;
  background-color: transparent;
}

:deep(.search-show-name .el-input__wrapper) {
  box-shadow: #00aeff82 0px 0px 0px 1px inset;
  width: 400px;
  background: linear-gradient(
    360deg,
    rgba(0, 105, 175, 0.64) 0%,
    rgba(0, 67, 119, 0.01) 100%
  );
  border-radius: 15px;
  // border: 1px solid;
  // border-image: linear-gradient(
  //         0deg,
  //         rgba(0, 174, 255, 0.51),
  //         rgba(0, 140, 255, 0),
  //         rgba(0, 170, 255, 0.7)
  //     )
  //     1 1;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper),
:deep(.el-pagination__sizes .el-input__wrapper) {
  box-shadow: none;
  background: url('@/assets/images/pagination-jump.png');
  background-size: 100% 100%;
}

:deep(.el-pagination__jump.is-last .el-input__wrapper) {
  box-shadow: none;
  background: url('@/assets/images/pagination-jump.png');
  background-size: 100% 100%;
}

:deep(.el-pagination__jump.is-last),
:deep(.el-pagination__jump.is-last .el-input__inner),
:deep(.el-pagination__sizes .el-input__inner),
:deep(.el-pagination__total.is-first) {
  color: #379fe2;
}

// 调整输入框placeholder的字体样式
:deep(input::-webkit-input-placeholder) {
  /* WebKit browsers */
  font-size: inherit;
  color: #ffffff !important;
  opacity: 0.8;
}

:deep(input:-moz-placeholder) {
  /* Mozilla Firefox 4 to 18 */
  font-size: inherit;
  color: #ffffff !important;
  opacity: 0.8;
}

:deep(input::-moz-placeholder) {
  /* Mozilla Firefox 19+ */
  font-size: inherit;
  color: #ffffff !important;
  opacity: 0.8;
}

:deep(input:-ms-input-placeholder) {
  /* Internet Explorer 10+ */
  font-size: inherit;
  color: #ffffff !important;
  opacity: 0.8;
}

// 修改checkbox样式
:deep(.plain.el-checkbox) {
  .el-checkbox__inner {
    background-color: transparent !important;
    width: 16px;
    height: 16px;
    border: 2px solid #09a4f0;

    &::before {
      background-color: #09a4f0;
      transform: scaleX(0.5);
    }

    &::after {
      border-color: #09a4f0;
      border-width: 2px;
    }
  }

  .el-checkbox__label {
    color: #ffffff;
  }
}

// 修改radio样式
:deep(.plain.el-radio) {
  .el-radio__inner {
    width: 1em;
    height: 1em;
    font-size: 20px;
    background: linear-gradient(
      360deg,
      rgba(0, 105, 175, 0.64) 0%,
      rgba(0, 67, 119, 0.01) 100%
    );
    border-radius: 50%;
    border: 1px solid #024977;

    &::after {
      width: 0.4em;
      height: 0.4em;
      background: #0073b6;
    }
  }

  .el-radio__label {
    color: #ffffff;
  }
}

// 数字输入框
:deep(.el-input-number.plain) {
  .el-input-number__decrease,
  .el-input-number__increase,
  .el-input__inner,
  .el-input__wrapper {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
    box-shadow: none;
    border: none;

    .el-icon {
      display: none;
    }
  }

  .el-input__wrapper {
    background: transparent;
  }

  .el-input-number__decrease {
    background: url('@/assets/images/border/border8@2x.png');
  }

  .el-input-number__increase {
    background: url('@/assets/images/border/border9@2x.png');
  }

  .el-input__inner {
    color: #ffffff;
    background: url('@/assets/images/border/border7@2x.png');
  }
}

// 修改select选择框样式
:deep(.el-select.plain) {
  .el-input__wrapper {
    border: 1px solid #00aeff;
    box-shadow: none;
    border-radius: 30px;
    background: linear-gradient(
      360deg,
      rgba(0, 105, 175, 0.64) 0%,
      rgba(0, 67, 119, 0.01) 100%
    );

    .el-input__inner {
      color: #ffffff;
    }

    .el-icon {
      color: #ffffff;
    }
  }
}

// 修改input输入框样式
:deep(.el-input.plain) {
  // height: 40px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  background-image: url('@/assets/images/border/border6@2x.png');

  .el-input__wrapper {
    box-shadow: none;
    border: 0;
    background: transparent;

    .el-input__icon {
      color: #0a8fd9;
    }

    .el-input__inner {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

// button修改
:deep(.el-button.plain) {
  background: transparent;
  border: none;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  background-image: url('@/assets/images/bg/bg1@2x.png');

  &:hover {
    background-image: url('@/assets/images/bg/bg2@2x.png');
    background-color: transparent;
  }
}

// el-collapse修改

:deep(.el-collapse.plain) {
  border: none;

  .el-collapse-item {
    .el-collapse-item__header {
      border-bottom-color: #093d74;
      background: transparent;

      .el-icon {
        color: #09a4f0;
      }
    }

    &.is-active .el-collapse-item__header {
      border: none;
    }

    .el-collapse-item__wrap {
      border-bottom-color: #093d74;
      background: transparent;
    }
  }
}

// el-radio-button样式重写
:deep(.el-radio-group) {
  .el-radio-button.plain {
    .el-radio-button__inner {
      background: transparent;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
      border: none;
      background-color: transparent;
      color: #ffffff;
      border-radius: 0;
    }

    &.is-active {
      .el-radio-button__inner {
        color: #07a4f0;
        background-color: rgba(7, 164, 240, 0.2);
        box-shadow: none;
      }
    }
  }
}

// el-date-picker样式重写
:deep(.el-date-editor.plain) {
  --el-date-editor-bg-color: linear-gradient(
    360deg,
    rgba(0, 105, 175, 0.64) 0%,
    rgba(0, 67, 119, 0.01) 100%
  );
  background: var(--el-date-editor-bg-color);
  border: 1px solid rgba(0, 170, 255, 0.6);
  box-shadow: none;

  .el-range-separator {
    color: #ffffff;
  }

  &.round {
    border-radius: 30px;
  }

  .el-icon {
    color: #0073b6;
  }
}

:deep(.el-radio-group) {
  .el-radio-button.plain:first-child {
    .el-radio-button__inner {
      background-image: url('@/assets/images/border/el_radio_button_border_left@2x.png');
    }
  }

  .el-radio-button.plain:last-child {
    .el-radio-button__inner {
      background-image: url('@/assets/images/border/el_radio_button_border_right@2x.png');
    }
  }
}

// border边框
.has-bg,
.has-border {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

.border1 {
  background-image: url('@/assets/images/border/border1@2x.png');
}

.border2 {
  background-image: url('@/assets/images/border/border2@2x.png');
}

.border3 {
  background-image: url('@/assets/images/border/border3@2x.png');
}

.border4 {
  background-image: url('@/assets/images/border/border4@2x.png');
}

.border5 {
  background-image: url('@/assets/images/border/border5@2x.png');
}

.border6 {
  background-image: url('@/assets/images/border/border11@2x.png');
}

.border7 {
  background-image: url('@/assets/images/border/border10@2x.png');
}
.border8 {
  background-image: url('@/assets/images/border/border12@2x.png');
}
.border9 {
  background-image: url('@/assets/images/border/border13@2x.png');
}
.border10 {
  background-image: url('@/assets/images/border/border14@2x.png');
}
.border11 {
  background-image: url('@/assets/images/border/border15@2x.png');
}
.border12 {
  background-image: url('@/assets/images/border/border16@2x.png');
}
.border13 {
  background-image: url('@/assets/images/border/border17@2x.png');
}

// bg
.bg1 {
  background-image: url('@/assets/images/bg/bg1@2x.png');
}

.bg2 {
  background-image: url('@/assets/images/bg/bg2@2x.png');
}

.bg3 {
  background-image: url('@/assets/images/bg/bg3@2x.png');
}

.bg4 {
  background-image: url('@/assets/images/bg/bg4@2x.png');
}

.bg5 {
  background-image: url('@/assets/images/title/title1@2x.png');
}
.bg6 {
  background-image: url('@/assets/images/bg/bg6@2x.png');
}

:deep(.el-progress) {
  &.cool {
    width: 62px;

    .el-progress-bar {
      height: 100%;

      .el-progress-bar__outer {
        height: 100%;
        padding: 2px;
        background: url('@/assets/images/progress-background.png') no-repeat;
        background-size: 100% 100%;

        .el-progress-bar__inner {
          position: unset;
          height: 20px;

          .el-progress-bar__innerText {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
}

:deep(.el-dialog) {
  background-color: rgb(23, 39, 78);
  .el-dialog__header {
    margin-right: 0;
  }
  .el-dialog__title {
    --el-text-color-primary: #ffffff;
  }
  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    color: white;
  }
}
:deep(.technology-diaog) {
  position: relative;
  background: transparent;
  &::before {
    position: absolute;
    top: -10px;
    left: 0;
    height: 65%;
    content: '';
    background: url('@/assets/images/dialog-bg.png');
    width: 100%;
    background-size: 100%;
    z-index: -5;
  }
  &::after {
    position: absolute;
    bottom: -40px;
    left: 0;
    height: 65%;
    content: '';
    background: url('@/assets/images/dialog-footer-bg.png');
    width: 100%;
    background-size: 100%;
    transform: rotateZ(180deg);
    z-index: -5;
  }
  .el-dialog__body {
    background: transparent;
    color: white;
    padding: 10px 30px 0;
  }
}
